<template>
    <el-dialog :model-value="visible" :title="isBindManager[1]" width="500" @closed="close">
        <el-form ref="formRef" :model="editForm" label-position="top" :rules="rules">
            <el-form-item :label="TableLabel.Code + ': '" prop="ShopCode">
                <el-input v-model.trim="editForm.ShopCode" :placeholder="'请输入' + TableLabel.Code" disabled></el-input>
            </el-form-item>
            <el-form-item :label="TableLabel.ManagerId + ': '" prop="ManagerId">
                <MySelect v-model.trim="editForm.ManagerId" :options="ParamsObj.ShopManager" :value="(_, key) => +key"
                    :placeholder="'请选择' + TableLabel.ManagerId" :clearable="false">
                </MySelect>
            </el-form-item>
        </el-form>

        <template #footer>
            <el-button @click="emit('update:visible', false)">取消</el-button>
            <el-button type="primary" @click="Submit" :loading="loading">提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { TableLabel } from "./ConfigData"
import * as types from "./types"
import { ShopListApi } from "@/api/shop_manager/shop_list"
import { FormInstance, FormRules } from "element-plus";
import MessageUti from "@/library/utils/MessageUti"
import { OperateLabel } from "./ConfigData"
import { MySelect } from "@/components"

const props = defineProps<{
    visible: types.EditDialogType['visible']
    editForm: types.BindManagerDialogType['editForm']
    isBindManager: types.BindManagerDialogType['isBindManager']
    ParamsObj: types.ParamsObjType
}>()

watch(() => props.editForm, (val) => {
    editForm.value = { ...val }
})

const emit = defineEmits<{
    (e: 'submitSuccess'): void
    (e: "update:visible", visible: boolean): void
}>()

const initForm: types.BindManagerDialogType['editForm'] = {
    ManagerId: undefined,
    ShopCode: undefined
}
const editForm = ref({ ...initForm })
const formRef = ref<FormInstance>()
const rules: FormRules = {
    ShopCode: { required: true, message: "请输入" + TableLabel.Code, trigger: "blur" },
    ManagerId: { required: true, message: "请选择" + TableLabel.ManagerId, trigger: "change" },
}

// 是否绑定管理员
const isBindManager = computed<[boolean, string]>(() => {
    const isTrue = props.isBindManager
    const message = isTrue ? OperateLabel.BindManager : OperateLabel.UpdateManager;

    return [isTrue, message]
})

const loading = ref(false)
const Submit = async () => {
    const valid = await formRef.value?.validate(() => { })
    if (!valid) { return }

    loading.value = true
    const useApi = isBindManager.value[0] ? ShopListApi.BindManager : ShopListApi.UpdateManager;

    try {
        await useApi(editForm.value as any)
        emit("submitSuccess")
        emit("update:visible", false)
        MessageUti.showSuccess(isBindManager.value[1] + "成功")
    }
    catch (error) { }
    finally {
        loading.value = false
    }
}

const close = () => {
    emit('update:visible', false)
    editForm.value = { ...initForm }
    formRef.value?.resetFields()
}

</script>

<style scoped></style>